				<!--Page Title-->
                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                <div id="page-title">
                    <h1 class="page-header text-overflow">Dashboard</h1>

                    <!--Searchbox-->
                    <!-- <div class="searchbox">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="Search..">
                            <span class="input-group-btn">
                                <button class="text-muted" type="button"><i class="demo-pli-magnifi-glass"></i></button>
                            </span>
                        </div>
                    </div> -->
                </div>
                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                <!--End page title-->

                <!--Page content-->
                <!--===================================================-->
                <div>
                    
					<div>
					    <div class="col-sm-7">
					
					        <!--Network Line Chart-->
					        <!--===================================================-->
					        <div id="demo-panel-network" class="panel">
					            <div class="panel-heading">
					                <div class="panel-control">
					                    <button id="demo-panel-network-refresh" data-toggle="panel-overlay" data-target="#demo-panel-network" class="btn"><i class="demo-pli-repeat-2 icon-lg"></i></button>
					                    <div class="btn-group">
					                        <button class="dropdown-toggle btn" data-toggle="dropdown" aria-expanded="false"><i class="demo-pli-gear icon-lg"></i></button>
					                        <ul class="dropdown-menu dropdown-menu-right">
					                            <li><a href="#">Action</a></li>
					                            <li><a href="#">Another action</a></li>
					                            <li><a href="#">Something else here</a></li>
					                            <li class="divider"></li>
					                            <li><a href="#">Separated link</a></li>
					                        </ul>
					                    </div>
					                </div>
					                <h3 class="panel-title">Network</h3>
					            </div>
					
					            <!--Morris line chart placeholder-->
					            <div id="morris-chart-network" class="morris-full-content"></div>
					
					            <!--Chart information-->
					            <div class="panel-body">
					                <div class="pad-top">
					                    <div class="col-sm-8">
					                        <div class="media">
					                            <div class="media-left">
					                                <div class="media">
					                                    <p class="text-semibold text-main">Temperature</p>
					                                    <div class="media-left pad-no">
					                                        <span class="text-2x text-semibold text-nowrap text-main">
					                                            <i class="demo-pli-temperature"></i> 43.7
					                                        </span>
					                                    </div>
					                                    <div class="media-body">
					                                        <p class="mar-no">°C</p>
					                                    </div>
					                                </div>
					                            </div>
					                            <div class="media-body pad-lft">
					                                <div class="pad-btm">
					                                    <p class="text-semibold text-main mar-no">Today Tips</p>
					                                    <small>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</small>
					                                </div>
					                            </div>
					                        </div>
					                    </div>
					
					                    <div class="col-sm-4">
					                        <p class="text-semibold text-main">Bandwidth Usage</p>
					                        <ul class="list-unstyled">
					                            <li>
					                                <div class="media">
					                                    <div class="media-left">
					                                        <span class="text-2x text-semibold text-main">75.9</span>
					                                    </div>
					                                    <div class="media-body">
					                                        <p class="mar-no">Mbps</p>
					                                    </div>
					                                </div>
					                            </li>
					                            <li>
					                                <div class="clearfix">
					                                    <p class="pull-left mar-no">Outcome</p>
					                                    <p class="pull-right mar-no">75%</p>
					                                </div>
					                                <div class="progress progress-xs">
					                                    <div class="progress-bar progress-bar-info" style="width: 75%;">
					                                        <span class="sr-only">75%</span>
					                                    </div>
					                                </div>
					                            </li>
					                        </ul>
					                    </div>
					                </div>
					            </div>
					
					
					        </div>
					        <!--===================================================-->
					        <!--End network line chart-->
					
					    </div>
					    <div class="col-sm-5">
					        <div class="row">
					            <div class="col-sm-6 col-lg-6">
					
					                <!--Sparkline Area Chart-->
					                <div class="panel panel-success panel-colorful">
					                    <div class="pad-all">
					                        <p class="text-lg text-semibold"><i class="demo-pli-data-storage icon-fw"></i> HDD Usage</p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">132Gb</span>
					                            Free Space
					                        </p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">1,45Gb</span>
					                            Used space
					                        </p>
					                    </div>
					                    <div class="pad-all text-center">
					                        <!--Placeholder-->
					                        <div id="demo-sparkline-area"></div>
					                    </div>
					                </div>
					            </div>
					            <div class="col-sm-6 col-lg-6">
					
					                <!--Sparkline Line Chart-->
					                <div class="panel panel-info panel-colorful">
					                    <div class="pad-all">
					                        <p class="text-lg text-semibold"><i class="demo-pli-wallet-2 icon-fw"></i> Earning</p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">$764</span>
					                            Today
					                        </p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">$1,332</span>
					                            Last 7 Day
					                        </p>
					                    </div>
					                    <div class="pad-all text-center">
					
					                        <!--Placeholder-->
					                        <div id="demo-sparkline-line"></div>
					
					                    </div>
					                </div>
					            </div>
					        </div>
					        <div class="row">
					            <div class="col-sm-6 col-lg-6">
					
					                <!--Sparkline bar chart -->
					                <div class="panel panel-purple panel-colorful">
					                    <div class="pad-all">
					                        <p class="text-lg text-semibold"><i class="demo-pli-bag-coins icon-fw"></i> Sales</p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">$764</span>
					                            Today
					                        </p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">$1,332</span>
					                            Last 7 Day
					                        </p>
					                    </div>
					                    <div class="pad-all text-center">
					
					                        <!--Placeholder-->
					                        <div id="demo-sparkline-bar" class="box-inline"></div>
					
					                    </div>
					                </div>
					            </div>
					            <div class="col-sm-6 col-lg-6">
					
					                <!--Sparkline pie chart -->
					                <div class="panel panel-warning panel-colorful">
					                    <div class="pad-all">
					                        <p class="text-lg text-semibold"><i class="demo-pli-check icon-fw"></i> Task Progress</p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">34</span>
					                            Completed
					                        </p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">79</span>
					                            Total
					                        </p>
					                    </div>
					                    <div class="pad-all">
					                        <ul class="list-group list-unstyled">
					                            <li class="mar-btm">
					                                <span class="label label-warning pull-right">15%</span>
					                                <p>Progress</p>
					                                <div class="progress progress-md">
					                                    <div style="width: 15%;" class="progress-bar progress-bar-light">
					                                        <span class="sr-only">15%</span>
					                                    </div>
					                                </div>
					                            </li>
					                        </ul>
					                    </div>
					                </div>
					            </div>
					        </div>
					    </div>
					</div>
					<div class="row">
					    <div class="col-xs-12">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Order Status</h3>
					            </div>
					
					            <!--Data Table-->
					            <!--===================================================-->
					            <div class="panel-body">
					                <div class="pad-btm form-inline">
					                    <div class="row">
					                        <div class="col-sm-6 table-toolbar-left">
					                            <button class="btn btn-purple"><i class="demo-pli-add icon-fw"></i>Add</button>
					                            <button class="btn btn-default"><i class="demo-pli-printer"></i></button>
					                            <div class="btn-group">
					                                <button class="btn btn-default"><i class="demo-pli-information"></i></button>
					                                <button class="btn btn-default"><i class="demo-pli-recycling"></i></button>
					                            </div>
					                        </div>
					                        <div class="col-sm-6 table-toolbar-right">
					                            <div class="form-group">
					                                <input type="text" autocomplete="off" class="form-control" placeholder="Search" id="demo-input-search2">
					                            </div>
					                            <div class="btn-group">
					                                <button class="btn btn-default"><i class="demo-pli-download-from-cloud"></i></button>
					                                <div class="btn-group">
					                                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					                                        <i class="demo-pli-gear"></i>
					                                        <span class="caret"></span>
					                                    </button>
					                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
					                                        <li><a href="#">Action</a></li>
					                                        <li><a href="#">Another action</a></li>
					                                        <li><a href="#">Something else here</a></li>
					                                        <li class="divider"></li>
					                                        <li><a href="#">Separated link</a></li>
					                                    </ul>
					                                </div>
					                            </div>
					                        </div>
					                    </div>
					                </div>
					                <div class="table-responsive">
					                    <table class="table table-striped">
					                        <thead>
					                            <tr>
					                                <th>Invoice</th>
					                                <th>User</th>
					                                <th>Order date</th>
					                                <th>Amount</th>
					                                <th class="text-center">Status</th>
					                                <th class="text-center">Tracking Number</th>
					                            </tr>
					                        </thead>
					                        <tbody>
					                            <tr>
					                                <td><a href="#" class="btn-link"> Order #53431</a></td>
					                                <td>Steve N. Horton</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 22, 2014</span></td>
					                                <td>$45.00</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-success">Paid</div>
					                                </td>
					                                <td class="text-center">-</td>
					                            </tr>
					                            <tr>
					                                <td><a href="#" class="btn-link"> Order #53432</a></td>
					                                <td>Charles S Boyle</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 24, 2014</span></td>
					                                <td>$245.30</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-info">Shipped</div>
					                                </td>
					                                <td class="text-center"><i class="fa fa-plane"></i> CGX0089734531</td>
					                            </tr>
					                            <tr>
					                                <td><a href="#" class="btn-link"> Order #53433</a></td>
					                                <td>Lucy Doe</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 24, 2014</span></td>
					                                <td>$38.00</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-info">Shipped</div>
					                                </td>
					                                <td class="text-center"><i class="fa fa-plane"></i> CGX0089934571</td>
					                            </tr>
					                            <tr>
					                                <td><a href="#" class="btn-link"> Order #53434</a></td>
					                                <td>Teresa L. Doe</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 15, 2014</span></td>
					                                <td>$77.99</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-info">Shipped</div>
					                                </td>
					                                <td class="text-center"><i class="fa fa-plane"></i> CGX0089734574</td>
					                            </tr>
					                            <tr>
					                                <td><a href="#" class="btn-link"> Order #53435</a></td>
					                                <td>Teresa L. Doe</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 12, 2014</span></td>
					                                <td>$18.00</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-success">Paid</div>
					                                </td>
					                                <td class="text-center">-</td>
					                            </tr>
					                            <tr>
					                                <td><a href="#" class="btn-link">Order #53437</a></td>
					                                <td>Charles S Boyle</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 17, 2014</span></td>
					                                <td>$658.00</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-danger">Refunded</div>
					                                </td>
					                                <td class="text-center">-</td>
					                            </tr>
					                            <tr>
					                                <td><a href="#" class="btn-link">Order #536584</a></td>
					                                <td>Scott S. Calabrese</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 19, 2014</span></td>
					                                <td>$45.58</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-warning">Unpaid</div>
					                                </td>
					                                <td class="text-center">-</td>
					                            </tr>
					                        </tbody>
					                    </table>
					                </div>
					                <hr>
					                <div class="pull-right">
					                    <ul class="pagination text-nowrap mar-no">
					                        <li class="page-pre disabled">
					                            <a href="#">&lt;</a>
					                        </li>
					                        <li class="page-number active">
					                            <span>1</span>
					                        </li>
					                        <li class="page-number">
					                            <a href="#">2</a>
					                        </li>
					                        <li class="page-number">
					                            <a href="#">3</a>
					                        </li>
					                        <li>
					                            <span>...</span>
					                        </li>
					                        <li class="page-number">
					                            <a href="#">9</a>
					                        </li>
					                        <li class="page-next">
					                            <a href="#">&gt;</a>
					                        </li>
					                    </ul>
					                </div>
					            </div>
					            <!--===================================================-->
					            <!--End Data Table-->
					
					        </div>
					    </div>
					</div>
					
					
					
                </div>
                <!--===================================================-->
                <!--End page content-->
                
<script>

		//Dashboard.js
		//====================================================================
		//This file should not be included in your project.
		//This is just a sample how to initialize plugins or components.
		//
		//- ThemeOn.net -
		
		
		$(window).on('load', function() {
		
		
		
		 // Network chart ( Morris Line Chart )
		 // =================================================================
		 // Require MorrisJS Chart
		 // -----------------------------------------------------------------
		 // http://morrisjs.github.io/morris.js/
		 // =================================================================
		
		 var day_data = [
		     {"elapsed": "Oct-12", "value": 24, b:2},
		     {"elapsed": "Oct-13", "value": 34, b:22},
		     {"elapsed": "Oct-14", "value": 33, b:7},
		     {"elapsed": "Oct-15", "value": 22, b:6},
		     {"elapsed": "Oct-16", "value": 28, b:17},
		     {"elapsed": "Oct-17", "value": 60, b:15},
		     {"elapsed": "Oct-18", "value": 60, b:17},
		     {"elapsed": "Oct-19", "value": 70, b:7},
		     {"elapsed": "Oct-20", "value": 67, b:18},
		     {"elapsed": "Oct-21", "value": 86, b: 18},
		     {"elapsed": "Oct-22", "value": 86, b: 18},
		     {"elapsed": "Oct-23", "value": 113, b: 29},
		     {"elapsed": "Oct-24", "value": 130, b: 23},
		     {"elapsed": "Oct-25", "value": 114, b:10},
		     {"elapsed": "Oct-26", "value": 80, b:22},
		     {"elapsed": "Oct-27", "value": 109, b:7},
		     {"elapsed": "Oct-28", "value": 100, b:6},
		     {"elapsed": "Oct-29", "value": 105, b:17},
		     {"elapsed": "Oct-30", "value": 110, b:15},
		     {"elapsed": "Oct-31", "value": 102, b:17},
		     {"elapsed": "Nov-01", "value": 107, b:7},
		     {"elapsed": "Nov-02", "value": 60, b:18},
		     {"elapsed": "Nov-03", "value": 67, b: 18},
		     {"elapsed": "Nov-04", "value": 76, b: 18},
		     {"elapsed": "Nov-05", "value": 73, b: 29},
		     {"elapsed": "Nov-06", "value": 94, b: 13},
		     {"elapsed": "Nov-07", "value": 135, b:2},
		     {"elapsed": "Nov-08", "value": 154, b:22},
		     {"elapsed": "Nov-09", "value": 120, b:7},
		     {"elapsed": "Nov-10", "value": 100, b:6},
		     {"elapsed": "Nov-11", "value": 130, b:17},
		     {"elapsed": "Nov-12", "value": 100, b:15},
		     {"elapsed": "Nov-13", "value": 60, b:17},
		     {"elapsed": "Nov-14", "value": 70, b:7},
		     {"elapsed": "Nov-15", "value": 67, b:18},
		     {"elapsed": "Nov-16", "value": 86, b: 18},
		     {"elapsed": "Nov-17", "value": 86, b: 18},
		     {"elapsed": "Nov-18", "value": 113, b: 29},
		     {"elapsed": "Nov-19", "value": 130, b: 23},
		     {"elapsed": "Nov-20", "value": 114, b:10},
		     {"elapsed": "Nov-21", "value": 80, b:22},
		     {"elapsed": "Nov-22", "value": 109, b:7},
		     {"elapsed": "Nov-23", "value": 100, b:6},
		     {"elapsed": "Nov-24", "value": 105, b:17},
		     {"elapsed": "Nov-25", "value": 110, b:15},
		     {"elapsed": "Nov-26", "value": 102, b:17},
		     {"elapsed": "Nov-27", "value": 107, b:7},
		     {"elapsed": "Nov-28", "value": 60, b:18},
		     {"elapsed": "Nov-29", "value": 67, b: 18},
		     {"elapsed": "Nov-30", "value": 76, b: 18},
		     {"elapsed": "Des-01", "value": 73, b: 29},
		     {"elapsed": "Des-02", "value": 94, b: 13},
		     {"elapsed": "Des-03", "value": 79, b: 24}
		 ];
		
		 var chart = Morris.Area({
		     element : 'morris-chart-network',
		     data: day_data,
		     axes:false,
		     xkey: 'elapsed',
		     ykeys: ['value', 'b'],
		     labels: ['Download Speed', 'Upload Speed'],
		     yLabelFormat :function (y) { return y.toString() + ' Mb/s'; },
		     gridEnabled: false,
		     gridLineColor: 'transparent',
		     lineColors: ['#82c4f8','#0d92fc'],
		     lineWidth:[0,0],
		     pointSize:[0,0],
		     fillOpacity: 1,
		     gridTextColor:'#999',
		     parseTime: false,
		     resize:true,
		     behaveLikeLine : true,
		     hideHover: 'auto'
		 });
		
		
		
		
		
		 // HDD USAGE - SPARKLINE LINE AREA CHART
		 // =================================================================
		 // Require sparkline
		 // -----------------------------------------------------------------
		 // http://omnipotent.net/jquery.sparkline/#s-about
		 // =================================================================
		 var hddSparkline = function() {
		     $("#demo-sparkline-area").sparkline([57,69,70,62,73,79,76,77,73,52,57,50,60,55,70,68], {
		         type: 'line',
		         width: '100%',
		         height: '40',
		         spotRadius: 5,
		         lineWidth: 1.5,
		         lineColor:'rgba(255,255,255,.85)',
		         fillColor: 'rgba(0,0,0,0.03)',
		         spotColor: 'rgba(255,255,255,.5)',
		         minSpotColor: 'rgba(255,255,255,.5)',
		         maxSpotColor: 'rgba(255,255,255,.5)',
		         highlightLineColor : '#ffffff',
		         highlightSpotColor: '#ffffff',
		         tooltipChartTitle: 'Usage',
		         tooltipSuffix:' %'
		
		     });
		 }
		
		
		
		
		 // EARNING - SPARKLINE LINE CHART
		 // =================================================================
		 // Require sparkline
		 // -----------------------------------------------------------------
		 // http://omnipotent.net/jquery.sparkline/#s-about
		 // =================================================================
		 var earningSparkline = function(){
		     $("#demo-sparkline-line").sparkline([345,404,305,455,378,567,586,685,458,742,565], {
		         type: 'line',
		         width: '100%',
		         height: '40',
		         spotRadius: 4,
		         lineWidth:1,
		         lineColor:'#ffffff',
		         fillColor: false,
		         minSpotColor :false,
		         maxSpotColor : false,
		         highlightLineColor : '#ffffff',
		         highlightSpotColor: '#ffffff',
		         tooltipChartTitle: 'Earning',
		         tooltipPrefix :'$ ',
		         spotColor:'#ffffff',
		         valueSpots : {
		             '0:': '#ffffff'
		         }
		     });
		 }
		
		
		
		 // SALES - SPARKLINE BAR CHART
		 // =================================================================
		 // Require sparkline
		 // -----------------------------------------------------------------
		 // http://omnipotent.net/jquery.sparkline/#s-about
		 // =================================================================
		
		 var barEl = $("#demo-sparkline-bar");
		 var barValues = [40,32,65,53,62,55,24,67,45,70,45,56,34,67,76,32,65,53,62,55,24,67,45,70,45,56,70,45,56,34,67,76,32,65,53,62,55];
		 var barValueCount = barValues.length;
		 var barSpacing = 1;
		 var salesSparkline = function(){
		      barEl.sparkline(barValues, {
		         type: 'bar',
		         height: 55,
		         barWidth: Math.round((barEl.parent().width() - ( barValueCount - 1 ) * barSpacing ) / barValueCount),
		         barSpacing: barSpacing,
		         zeroAxis: false,
		         tooltipChartTitle: 'Daily Sales',
		         tooltipSuffix: ' Sales',
		         barColor: 'rgba(255,255,255,.7)'
		     });
		 }
		
		
		 $(window).on('resizeEnd', function(){
		     hddSparkline();
		     earningSparkline();
		     salesSparkline();
		 })
		 hddSparkline();
		 earningSparkline();
		 salesSparkline();
		
		
		
		
		
		 // PANEL OVERLAY
		 // =================================================================
		 // Require Nifty js
		 // -----------------------------------------------------------------
		 // http://www.themeon.net
		 // =================================================================
		 $('#demo-panel-network-refresh').niftyOverlay().on('click', function(){
		     var $el = $(this), relTime;
		
		     $el.niftyOverlay('show');
		
		
		     relTime = setInterval(function(){
		         $el.niftyOverlay('hide');
		         clearInterval(relTime);
		     },2000);
		 });
		
		
		
		
		
		
		
		
		 // WELCOME NOTIFICATIONS
		 // =================================================================
		 // Require Admin Core Javascript
		 // =================================================================
		 $.niftyNoty({
		     type: 'dark',
		     title: 'Welcome Administrator.',
		     message: 'You will notice that you now have an admin menu<br> that appears on the right hand side.',
		     container: 'floating',
		     timer: 5000
		 });
		
		});

</script>